<template>
  <div class="home-container">
    <!-- 轮播图区域 -->
    <div class="banner-section">
      <el-carousel :interval="5000" arrow="always" class="banner-carousel">
        <el-carousel-item v-for="banner in banners" :key="banner.id">
          <a :href="banner.link" target="_blank" class="banner-link">
            <img :src="banner.image" :alt="banner.title" class="banner-image">
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>
    
    <!-- 分类导航区域 -->
    <div class="category-section">
      <div class="category-grid">
        <div 
          v-for="category in categories" 
          :key="category.id"
          class="category-item"
          @click="handleCategoryClick(category.id)"
        >
          <div class="category-icon">
            <img :src="category.icon" :alt="category.name" class="category-img">
          </div>
          <div class="category-name">{{ category.name }}</div>
        </div>
      </div>
    </div>
    
    <!-- 热门商品区域 -->
    <div class="product-section hot-products">
      <div class="section-header">
        <h2 class="section-title">热门推荐</h2>
        <a href="/product/list?recommend=hot" class="section-more">查看更多 <el-icon><ArrowRight /></el-icon></a>
      </div>
      <div class="product-grid">
        <ProductCard 
          v-for="product in hotProducts" 
          :key="product.id"
          :product="product"
        />
      </div>
    </div>
    
    <!-- 新品上市区域 -->
    <div class="product-section new-products">
      <div class="section-header">
        <h2 class="section-title">新品上市</h2>
        <a href="/product/list?recommend=new" class="section-more">查看更多 <el-icon><ArrowRight /></el-icon></a>
      </div>
      <div class="product-grid">
        <ProductCard 
          v-for="product in newProducts" 
          :key="product.id"
          :product="product"
        />
      </div>
    </div>
    
    <!-- 限时折扣区域 -->
    <div class="discount-section">
      <div class="section-header">
        <h2 class="section-title">限时折扣</h2>
        <div class="countdown" v-if="countdownTime">
          <span class="countdown-label">距结束：</span>
          <span class="countdown-item">{{ formatCountdown(countdownTime.hours) }}</span>
          <span class="countdown-separator">:</span>
          <span class="countdown-item">{{ formatCountdown(countdownTime.minutes) }}</span>
          <span class="countdown-separator">:</span>
          <span class="countdown-item">{{ formatCountdown(countdownTime.seconds) }}</span>
        </div>
        <a href="/product/list?recommend=discount" class="section-more">查看更多 <el-icon><ArrowRight /></el-icon></a>
      </div>
      <div class="product-grid">
        <ProductCard 
          v-for="product in discountProducts" 
          :key="product.id"
          :product="product"
          :tags="['限时折扣']"
        />
      </div>
    </div>
    
    <!-- 品牌专区区域 -->
    <div class="brand-section">
      <div class="section-header">
        <h2 class="section-title">品牌专区</h2>
        <a href="/brand/list" class="section-more">全部品牌 <el-icon><ArrowRight /></el-icon></a>
      </div>
      <div class="brand-grid">
        <a 
          v-for="brand in brands" 
          :key="brand.id"
          :href="`/brand/detail?id=${brand.id}`"
          class="brand-item"
          target="_blank"
        >
          <img :src="brand.logo" :alt="brand.name" class="brand-logo">
        </a>
      </div>
    </div>
    
    <!-- 用户评价区域 -->
    <div class="review-section">
      <div class="section-header">
        <h2 class="section-title">用户评价</h2>
        <a href="/review/list" class="section-more">查看更多 <el-icon><ArrowRight /></el-icon></a>
      </div>
      <div class="review-slider">
        <el-carousel :interval="3000" arrow="hover" :slides-per-view="3" :loop="true" class="review-carousel">
          <el-carousel-item v-for="review in reviews" :key="review.id">
            <div class="review-card">
              <div class="review-header">
                <el-avatar :src="review.userAvatar || '/default-avatar.png'" class="user-avatar"></el-avatar>
                <div class="user-info">
                  <div class="user-name">{{ review.userName }}</div>
                  <div class="review-time">{{ formatDate(review.createTime, 'yyyy-MM-dd') }}</div>
                </div>
              </div>
              <div class="review-content">
                <p class="review-text">{{ review.content }}</p>
                <div v-if="review.images && review.images.length > 0" class="review-images">
                  <img 
                    v-for="(image, index) in review.images" 
                    :key="index"
                    :src="image" 
                    :alt="`评价图片${index + 1}`" 
                    class="review-image"
                  >
                </div>
              </div>
              <div class="review-product">
                <img :src="review.productImage || '/default-product.png'" :alt="review.productName" class="product-small-img">
                <span class="product-small-name">{{ review.productName }}</span>
              </div>
              <div class="review-rating">
                <el-rate 
                  :model-value="review.rating" 
                  disabled 
                  size="small"
                />
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    
    <!-- 促销活动区域 -->
    <div class="promotion-section">
      <div class="promotion-grid">
        <a href="/promotion/1" class="promotion-item big-item">
          <img src="/promotion/big1.png" alt="大促销活动" class="promotion-image">
        </a>
        <a href="/promotion/2" class="promotion-item small-item">
          <img src="/promotion/small1.png" alt="小促销活动1" class="promotion-image">
        </a>
        <a href="/promotion/3" class="promotion-item small-item">
          <img src="/promotion/small2.png" alt="小促销活动2" class="promotion-image">
        </a>
      </div>
    </div>
    
    <!-- API调用示例 -->
    <div class="api-example-section">
      <ApiExample />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useProductStore } from '../../store/modules/product'
import { ArrowRight } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { formatDate } from '../../utils/helper'
import ProductCard from '../../components/product/ProductCard.vue'
import ApiExample from '../../components/ApiExample.vue'

const router = useRouter()
const productStore = useProductStore()

// 轮播图数据
const banners = ref([
  { id: 1, image: '/banner/banner1.png', title: '新品首发', link: '/product/list?recommend=new' },
  { id: 2, image: '/banner/banner2.png', title: '限时促销', link: '/product/list?recommend=discount' },
  { id: 3, image: '/banner/banner3.png', title: '品牌特惠', link: '/brand/list' }
])

// 分类数据
const categories = ref([
  { id: 1, name: '手机数码', icon: '/category/phone.png' },
  { id: 2, name: '电脑办公', icon: '/category/computer.png' },
  { id: 3, name: '家用电器', icon: '/category/appliance.png' },
  { id: 4, name: '智能家居', icon: '/category/smart.png' },
  { id: 5, name: '服饰鞋包', icon: '/category/clothing.png' },
  { id: 6, name: '美妆个护', icon: '/category/beauty.png' },
  { id: 7, name: '食品生鲜', icon: '/category/food.png' },
  { id: 8, name: '图书文具', icon: '/category/book.png' }
])

// 热门商品数据
const hotProducts = ref([
  {
    id: 1,
    name: '超级智能手机 Pro Max',
    image: '/product/hot1.png',
    price: 6999,
    originalPrice: 7999,
    rating: 4.8,
    reviewCount: 1256,
    salesVolume: '5000+'
  },
  {
    id: 2,
    name: '超薄笔记本电脑 Air',
    image: '/product/hot2.png',
    price: 5999,
    originalPrice: 6499,
    rating: 4.9,
    reviewCount: 892,
    salesVolume: '3000+'
  },
  {
    id: 3,
    name: '智能手表 Series 7',
    image: '/product/hot3.png',
    price: 2199,
    originalPrice: 2499,
    rating: 4.7,
    reviewCount: 765,
    salesVolume: '4000+'
  },
  {
    id: 4,
    name: '无线蓝牙耳机 Pro',
    image: '/product/hot4.png',
    price: 1299,
    originalPrice: 1499,
    rating: 4.6,
    reviewCount: 987,
    salesVolume: '6000+'
  }
])

// 新品上市数据
const newProducts = ref([
  {
    id: 5,
    name: '全新旗舰手机 Ultra',
    image: '/product/new1.png',
    price: 8999,
    rating: 4.9,
    reviewCount: 123,
    salesVolume: '1000+'
  },
  {
    id: 6,
    name: '便携投影仪 Mini',
    image: '/product/new2.png',
    price: 3299,
    rating: 4.8,
    reviewCount: 89,
    salesVolume: '800+'
  },
  {
    id: 7,
    name: '智能空气净化器',
    image: '/product/new3.png',
    price: 1999,
    rating: 4.7,
    reviewCount: 67,
    salesVolume: '500+'
  },
  {
    id: 8,
    name: '机械键盘 RGB背光',
    image: '/product/new4.png',
    price: 899,
    rating: 4.6,
    reviewCount: 45,
    salesVolume: '300+'
  }
])

// 限时折扣数据
const discountProducts = ref([
  {
    id: 9,
    name: '智能电视 55英寸 4K HDR',
    image: '/product/discount1.png',
    price: 2699,
    originalPrice: 3999,
    rating: 4.7,
    reviewCount: 342,
    salesVolume: '2000+'
  },
  {
    id: 10,
    name: '无线充电器 15W快充',
    image: '/product/discount2.png',
    price: 129,
    originalPrice: 199,
    rating: 4.5,
    reviewCount: 567,
    salesVolume: '8000+'
  },
  {
    id: 11,
    name: '全自动咖啡机',
    image: '/product/discount3.png',
    price: 4299,
    originalPrice: 5299,
    rating: 4.8,
    reviewCount: 234,
    salesVolume: '1500+'
  },
  {
    id: 12,
    name: '运动蓝牙耳机',
    image: '/product/discount4.png',
    price: 399,
    originalPrice: 599,
    rating: 4.6,
    reviewCount: 456,
    salesVolume: '5000+'
  }
])

// 品牌数据
const brands = ref([
  { id: 1, name: '品牌1', logo: '/brand/brand1.png' },
  { id: 2, name: '品牌2', logo: '/brand/brand2.png' },
  { id: 3, name: '品牌3', logo: '/brand/brand3.png' },
  { id: 4, name: '品牌4', logo: '/brand/brand4.png' },
  { id: 5, name: '品牌5', logo: '/brand/brand5.png' },
  { id: 6, name: '品牌6', logo: '/brand/brand6.png' }
])

// 用户评价数据
const reviews = ref([
  {
    id: 1,
    userName: '张**',
    userAvatar: '/avatar/user1.png',
    content: '手机非常好用，运行流畅，拍照效果也很棒，续航能力强，值得购买！',
    images: ['/review/review1-1.png', '/review/review1-2.png'],
    rating: 5,
    productId: 1,
    productName: '超级智能手机 Pro Max',
    productImage: '/product/hot1.png',
    createTime: '2023-06-15 10:30:00'
  },
  {
    id: 2,
    userName: '李**',
    userAvatar: '/avatar/user2.png',
    content: '笔记本电脑很轻薄，携带方便，性能也不错，办公使用完全足够，推荐购买。',
    images: ['/review/review2-1.png'],
    rating: 4,
    productId: 2,
    productName: '超薄笔记本电脑 Air',
    productImage: '/product/hot2.png',
    createTime: '2023-06-10 15:45:00'
  },
  {
    id: 3,
    userName: '王**',
    userAvatar: '/avatar/user3.png',
    content: '智能手表功能强大，续航时间长，运动监测准确，非常满意这次购买。',
    images: [],
    rating: 5,
    productId: 3,
    productName: '智能手表 Series 7',
    productImage: '/product/hot3.png',
    createTime: '2023-06-05 09:20:00'
  }
])

// 倒计时数据
const countdownTime = ref({
  hours: 12,
  minutes: 34,
  seconds: 56
})

let countdownInterval = null

// 处理分类点击
const handleCategoryClick = (categoryId) => {
  router.push({ path: '/product/list', query: { categoryId } })
}

// 格式化倒计时
const formatCountdown = (value) => {
  return value.toString().padStart(2, '0')
}

// 更新倒计时
const updateCountdown = () => {
  countdownTime.value.seconds--
  if (countdownTime.value.seconds < 0) {
    countdownTime.value.seconds = 59
    countdownTime.value.minutes--
    if (countdownTime.value.minutes < 0) {
      countdownTime.value.minutes = 59
      countdownTime.value.hours--
      if (countdownTime.value.hours < 0) {
        // 倒计时结束，重置为24小时
        countdownTime.value = {
          hours: 24,
          minutes: 0,
          seconds: 0
        }
      }
    }
  }
}

// 生命周期钩子
onMounted(() => {
  // 启动倒计时
  countdownInterval = setInterval(updateCountdown, 1000)
  
  // 加载真实数据（模拟）
  // productStore.loadHotProducts().then(data => {
  //   hotProducts.value = data
  // }).catch(error => {
  //   ElMessage.error('加载热门商品失败：' + error.message)
  // })
  // 
  // productStore.loadNewProducts().then(data => {
  //   newProducts.value = data
  // }).catch(error => {
  //   ElMessage.error('加载新品失败：' + error.message)
  // })
})

onUnmounted(() => {
  // 清除倒计时
  if (countdownInterval) {
    clearInterval(countdownInterval)
  }
})
</script>

<style scoped>
.home-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 轮播图区域 */
.banner-section {
  margin-bottom: 30px;
}

.banner-carousel {
  height: 400px;
}

.banner-link {
  display: block;
  width: 100%;
  height: 100%;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: $border-radius-base;
}

/* 分类导航区域 */
.category-section {
  margin-bottom: 30px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: $border-radius-base;
  box-shadow: $shadow-base;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: $border-radius-base;
  cursor: pointer;
  transition: all 0.3s;
}

.category-item:hover {
  background-color: $primary-color;
  transform: translateY(-2px);
}

.category-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.category-name {
  font-size: $font-size-sm;
  color: $text-color;
  text-align: center;
}

.category-item:hover .category-name {
  color: #fff;
}

/* 商品区域通用样式 */
.product-section {
  margin-bottom: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid $primary-color;
}

.section-title {
  font-size: $font-size-xl;
  color: $text-color;
  font-weight: bold;
  margin: 0;
}

.section-more {
  display: flex;
  align-items: center;
  gap: 5px;
  color: $text-color-secondary;
  font-size: $font-size-base;
  text-decoration: none;
  transition: color 0.3s;
}

.section-more:hover {
  color: $primary-color;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 限时折扣区域 */
.discount-section {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: $border-radius-base;
  box-shadow: $shadow-base;
}

.discount-section .section-header {
  border-bottom: 1px solid $border-color;
}

.countdown {
  display: flex;
  align-items: center;
  gap: 5px;
}

.countdown-label {
  font-size: $font-size-sm;
  color: $text-color-secondary;
}

.countdown-item {
  padding: 4px 8px;
  background-color: $danger-color;
  color: #fff;
  font-size: $font-size-base;
  font-weight: bold;
  border-radius: $border-radius-small;
}

.countdown-separator {
  font-size: $font-size-base;
  color: $danger-color;
  font-weight: bold;
}

/* 品牌专区区域 */
.brand-section {
  margin-bottom: 30px;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: $border-radius-base;
  box-shadow: $shadow-base;
}

.brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  border: 1px solid $border-color;
  border-radius: $border-radius-base;
  transition: all 0.3s;
}

.brand-item:hover {
  border-color: $primary-color;
  transform: translateY(-2px);
  box-shadow: $shadow-hover;
}

.brand-logo {
  max-width: 80%;
  max-height: 60%;
  object-fit: contain;
}

/* 用户评价区域 */
.review-section {
  margin-bottom: 30px;
}

.review-slider {
  padding: 20px;
  background-color: #fff;
  border-radius: $border-radius-base;
  box-shadow: $shadow-base;
}

.review-carousel {
  height: 300px;
}

.review-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  border: 1px solid $border-color;
  border-radius: $border-radius-base;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: $font-size-base;
  color: $text-color;
  font-weight: 500;
}

.review-time {
  font-size: $font-size-xs;
  color: $text-color-placeholder;
}

.review-content {
  flex: 1;
  margin-bottom: 12px;
}

.review-text {
  font-size: $font-size-sm;
  color: $text-color-secondary;
  line-height: 1.5;
  margin: 0 0 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.review-images {
  display: flex;
  gap: 8px;
}

.review-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: $border-radius-small;
}

.review-product {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-top: 12px;
  border-top: 1px solid $border-color;
}

.product-small-img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: $border-radius-small;
}

.product-small-name {
  flex: 1;
  font-size: $font-size-xs;
  color: $text-color-secondary;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-rating {
  display: flex;
  justify-content: flex-end;
}

/* 促销活动区域 */
.promotion-section {
  margin-bottom: 30px;
}

.promotion-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 20px;
}

.promotion-item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: $border-radius-base;
  box-shadow: $shadow-base;
  transition: transform 0.3s;
}

.promotion-item:hover {
  transform: translateY(-2px);
  box-shadow: $shadow-hover;
}

.promotion-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.promotion-item:hover .promotion-image {
  transform: scale(1.05);
}

.big-item {
  height: 300px;
}

.small-item {
  height: 300px;
}

.api-example-section {
  margin-top: 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: $border-radius-base;
  box-shadow: $shadow-base;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .brand-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .banner-carousel {
    height: 350px;
  }
}

@media (max-width: 992px) {
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
  }
  
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .brand-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .review-carousel {
    height: 350px;
  }
  
  .promotion-grid {
    grid-template-columns: 1fr;
  }
  
  .big-item,
  .small-item {
    height: 200px;
  }
  
  .banner-carousel {
    height: 300px;
  }
}

@media (max-width: 768px) {
  .home-container {
    padding: 0 10px;
  }
  
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 15px;
  }
  
  .category-icon {
    width: 40px;
    height: 40px;
  }
  
  .category-img {
    width: 30px;
    height: 30px;
  }
  
  .category-name {
    font-size: $font-size-xs;
  }
  
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .brand-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .review-carousel {
    height: 400px;
  }
  
  .banner-carousel {
    height: 250px;
  }
}

@media (max-width: 480px) {
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 10px;
  }
  
  .category-icon {
    width: 30px;
    height: 30px;
  }
  
  .category-img {
    width: 20px;
    height: 20px;
  }
  
  .product-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .brand-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .countdown {
    width: 100%;
    justify-content: center;
  }
  
  .banner-carousel {
    height: 200px;
  }
}
</style>